<html>
	<head>
		<title>Scroll</title>
		<style type="text/css">
			body{
				background-color: black;
				
			}
			a{
				text-decoration:none;}
			div.boton1{
				background-image: url("");
				background-color: blue;
				border:1px solid green;
				border-radius:5px;
				margin-left: 220px;
				margin-top: 145px;
				padding: 5px;
				position:absolute;
				bottom:600;
				text-decoration:none;
				z-index:4;
				color:white;
				opacity:0.65;
				visibility:visible;
				-moz-transition-duration:0.5s;
				-webkit-transition-duration:0.5s;
				text-align:center;
				
			}
						div.boton2{
				background-image: url("");
				background-color: blue;
				border:1px solid green;
				border-radius:5px;
				margin-left: 220px;
				margin-top: 145px;
				padding: 5px;
				position:absolute;
				bottom:600;
				text-decoration:none;
				z-index:4;
				visibility:hidden;
				color:white;
				opacity:0.65;
				-moz-transition-duration:0.5s;
				-webkit-transition-duration:0.5s;
				text-align:center;
				
			}
			div.boton3{
				background-image: url("");
				background-color: blue;
				border:1px solid green;
				border-radius:5px;
				margin-left: 220px;
				margin-top: 145px;
				padding: 5px;
				position:absolute;
				bottom:600;
				visibility:hidden;
				text-decoration:none;
				z-index:4;
				color:white;
				opacity:0.65;
				-moz-transition-duration:0.5s;
				-webkit-transition-duration:0.5s;
				text-align:center;
				
			}
			div.boton4{
				background-image: url("");
				background-color: blue;
				border:1px solid green;
				border-radius:5px;
				margin-left: 220px;
				margin-top: 145px;
				padding: 5px;
				visibility:hidden;
				position:absolute;
				bottom:600;
				text-decoration:none;
				z-index:4;
				color:white;
				opacity:0.65;
				-moz-transition-duration:0.5s;
				-webkit-transition-duration:0.5s;
				text-align:center;
				
			}

			div.boton1:hover{
				opacity:1;
				-moz-transition-duration:1s;
				-webkit-transition-duration:1s;
				color:white;
			}	div.boton2:hover{
				opacity:1;
				-moz-transition-duration:1s;
				-webkit-transition-duration:1s;
				color:white;
			}	div.boton3:hover{
				opacity:1;
				-moz-transition-duration:1s;
				-webkit-transition-duration:1s;
				color:white;
			}
			div.boton4:hover{
				opacity:1;
				-moz-transition-duration:1s;
				-webkit-transition-duration:1s;
				color:white;
			}

			div.descripcionfondo{
				opacity:0.8;
				background-color:black;
				width:300px;
				height:90px;
				z-index:7;
				color:white;
				bottom:400;
				margin-top:155px;
				position:absolute;
			}
			div.descripcion{
				background-color:transparent;
				text-align:left;
				color:white;
				width:220px;
				overflow-y: hidden;
                overflow-x: auto;
                font-size:8px;
                box-sizing:border-box;
                outline:none;
                word-wrap: break-word;
				height:800px;
				visibility:visible;
				margin-top:138px;
				padding:5px;
				position:absolute;
			}
  			div.fondoslide{
  				width:300;
  				height:208px;
  				overflow:hidden;
  				direction:1tr;
  				position:absolute;
  				top:0px;
  				
  			}
			div.imagen1{
				width:auto;
				top:0;
				height:auto;
				direction:ltr;
				width:300px;
				height:208px;
				background-color: blue;
				background-image:url("http://i40.tinypic.com/24c60i9.jpg");
				visibility:visible; /*hidden ocultar; visible mostrar*/
				position:relative; /*absolute ocultar; relative mostrar*/
				
			}
			div.imagen2{
				width:auto;
				height:auto;
				width:300px;
				height:208px;
				top:0;
				position:relative; /*absolute ocultar; relative mostrar*/
				background-image:url("http://i43.tinypic.com/287ogut.png");
				visibility:visible; /*hidden ocultar; visible mostrar*/
				direction:ltr;
				
			}
			div.imagen3{
				width:auto;
				height:auto;
				width:300px;
				height:208px;
				visibility:visible; /*hidden ocultar; visible mostrar*/
				background-image:url("http://i43.tinypic.com/287ogut.png");
				direction:ltr;
		        position:relative; /*absolute ocultar; relative mostrar*/
				
			}
			div.imagen4{
				width:auto;
				visibility:visible; /*hidden ocultar; visible mostrar*/
				height:auto;
				width:300px;
				height:208px;
				position:absolute; /*absolute ocultar; relative mostrar*/
				background-image:url("http://i43.tinypic.com/287ogut.png");
				direction:ltr;
				left:0px;
				
				
			}
			div#descripcion1:after{
				content:"desc 1fgdfddfdfffffffffff";
			}
			div#descripcion2{
				-webkit-transition-duration: 0.7s;
				-moz-transation-duration:0.7s;
			}
			div#descripcion3{
				-webkit-transition-duration: 0.7s;
				-moz-transation-duration:0.7s;			
				}
			div#descripcion4{
				-webkit-transition-duration: 0.7s;
				-moz-transation-duration:0.7s;
			}
			div#botonslide0{
				width:5px;
				height:5px;
				border:1px solid yellow;
				background-color:yellow;
				border-radius:10px;
				top:20;
				left:70px;
				position:absolute;
				z-index:5;
				display: block;
				
			}
				div#botonslide1{
				width:5px;
				height:5px;
				border:1px solid yellow;
				background-color:yellow;
				border-radius:10px;
				top:20;
				left:120px;
				position:absolute;
				z-index:5;

				}
					div#botonslide2{
				width:5px;
				height:5px;
				border:1px solid yellow;
				background-color:yellow;
				border-radius:10px;
				top:20;
				left:170px;
				position:absolute;

				z-index:5;
				
				}
					div#botonslide3{
				width:5px;
				height:5px;
				border:1px solid yellow;
				background-color:yellow;
				border-radius:10px;
				top:20;
				left:220px;
				position:absolute;

				z-index:5;}
				.desc0{
					color:white;
					visibility:hidden;
			
				.desc2{
					color:white;
					visibility:hidden;
				}
				.desc3{
					color:white;
					visibility:hidden;
				}
				.des1{
					color:white;
					visibility:hidden;}
					
	
			
		</style>
		
<script type="text/javascript" src="/aasdasdd/styleswitch.js"></script>
<script type="text/javascript" src="/aasdasdd/jquery.js"></script>
<link rel="alternate stylesheet" type="text/css" href="/aasdasdd/estilo1.css" title="estilo1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/aasdasdd/estilo2.css" title="estilo2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/aasdasdd/estilo3.css" title="estilo3" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/aasdasdd/estilo4.css" title="estilo4" media="screen" />



	</head>
	<body>
		<script>
(function($)
{
   $(document).ready(function() {
	  $('.styleswitch').click(function()
	  {
		 switchStylestyle(this.getAttribute("rel"));
		 return false;
	  });
	  var c = readCookie('style');
	  if (c) switchStylestyle(c);
   });
   function switchStylestyle(styleName)
   {
	  $('link[@rel*=style][title]').each(function(i)
	  {
		 this.disabled = true;
		 if (this.getAttribute('title') == styleName) this.disabled = false;
	  });
	  createCookie('style', styleName, 365);
   }
})(jQuery);
</script>




		<a href="link1"><div class="boton1">Ver ahora</div></a>
		<a href="link2"><div class="boton2">Ver ahora</div></a>
		<a href="link3"><div class="boton3">Ver ahora</div></a>
		<a href="link4"><div class="boton4">Ver ahora</div></a>
		
		<div class="descripcion" id="descripcion1"></div>
		<div class="descripcion" id="descripcion2"></div>
		<div class="descripcion" id="descripcion3"></div>
		<div class="descripcion" id="descripcion4"></div>



			<a href="serversideSwitch.html?style=estilo1" rel="estilo1" class="styleswitch"><div id="botonslide0"></div></a>
			<a href="serversideSwitch.html?style=estilo2" rel="estilo2" class="styleswitch"><div id="botonslide1"></div></a>
			<a href="serversideSwitch.html?style=estilo2" rel="estilo3" class="styleswitch"><div id="botonslide2"></div></a>
			<a href="serversideSwitch.html?style=estilo2" rel="estilo4" class="styleswitch"><div id="botonslide3"></div></a>
            <div class="fondoslide">  		
       		<div id="hola">
       		<div class="descripcionfondo"></div>
       		<div class="desc0"></div>
       		<div class="desc1"></div>
       		<div class="desc2"></div>
       		<div class="desc3"></div>
			<div class="imagen1"></div>
			<div class="imagen2"></div>
			<div class="imagen3"></div>
			<div class="imagen4"></div>
			</div></div>			
	</body>
</html>